function Tab(){
    this.btns = document.querySelectorAll(".main .special .tab ul li");
    this.conts = document.querySelectorAll(".main .special .tab .conts>div");

    this.index = 0;
    this.setIndex();
    this.setEvent();
}
Tab.prototype.setEvent = function(){

    this.btns[this.index].style.background = "blue";
    this.btns[this.index].style.color = "white";
    this.conts[this.index].style.display = "flex";
    const that = this;

    for(let i=0;i<this.btns.length;i++){
        this.btns[i].onclick = function(){
            this.style.background = "blue";
            this.style.color = "white"
            that.btns[that.index].style.background = "none";
            that.btns[that.index].style.color = "black";

            that.conts[that.index].style.display = "none";
            that.conts[this.index].style.display = "flex";
            that.index = this.index;
        }
    }
}
Tab.prototype.setIndex = function(){
    this.btns.forEach((val,idx)=>{
        val.index = idx;
    })
}
Tab.prototype.setDefault = function(){
    this.conts[this.index].style.display = "flex";
}
new Tab();